<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>车型选择</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/mui.indexedlist.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            font-size: 14px !important;
        }
        .mui-bar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        #done.mui-disabled{
            color: gray;
            overflow: hidden;
        }
        .carBrandList{margin: 0; padding: 0;}
        .carBrandList>li{padding: 5px 15px;}
        .mui-indexed-list-item,.mui-indexed-list-item>span,.mui-indexed-list-item>img{vertical-align: middle;}
        .mui-indexed-list-item>img{width: 30px; margin-right: 10px;}
    </style>
</head>

<body>
<div class="mui-content">
    <div id='list' class="mui-indexed-list">
        <div class="mui-indexed-list-search mui-input-row mui-search">
            <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索汽车品牌">
        </div>
        <div class="mui-indexed-list-bar">
            <a>A</a>
            <a>B</a>
            <a>C</a>
            <a>D</a>
            <a>E</a>
            <a>F</a>
            <a>G</a>
            <a>H</a>
            <a>I</a>
            <a>J</a>
            <a>K</a>
            <a>L</a>
            <a>M</a>
            <a>N</a>
            <a>O</a>
            <a>P</a>
            <a>Q</a>
            <a>R</a>
            <a>S</a>
            <a>T</a>
            <a>U</a>
            <a>V</a>
            <a>W</a>
            <a>X</a>
            <a>Y</a>
            <a>Z</a>
        </div>
        <div class="mui-indexed-list-alert"></div>
        <div class="mui-indexed-list-inner">
            <div class="mui-indexed-list-empty-alert">没有数据</div>
            <ul class="mui-table-view">
                <li data-group="A" class="mui-table-view-divider mui-indexed-list-group" id="aBrand">A</li>
                <li data-group="B" class="mui-table-view-divider mui-indexed-list-group" id="bBrand">B</li>
                <li data-group="C" class="mui-table-view-divider mui-indexed-list-group" id="cBrand">C</li>
                <li data-group="D" class="mui-table-view-divider mui-indexed-list-group" id="dBrand">D</li>
                <li data-group="F" class="mui-table-view-divider mui-indexed-list-group" id="fBrand">F</li>
                <li data-group="G" class="mui-table-view-divider mui-indexed-list-group" id="gBrand">G</li>
                <li data-group="H" class="mui-table-view-divider mui-indexed-list-group" id="hBrand">H</li>
                <li data-group="J" class="mui-table-view-divider mui-indexed-list-group" id="jBrand">J</li>
                <li data-group="K" class="mui-table-view-divider mui-indexed-list-group" id="kBrand">K</li>
                <li data-group="L" class="mui-table-view-divider mui-indexed-list-group" id="lBrand">L</li>
                <li data-group="M" class="mui-table-view-divider mui-indexed-list-group" id="mBrand">M</li>
                <li data-group="N" class="mui-table-view-divider mui-indexed-list-group" id="nBrand">N</li>
                <li data-group="O" class="mui-table-view-divider mui-indexed-list-group" id="oBrand">O</li>
                <li data-group="Q" class="mui-table-view-divider mui-indexed-list-group" id="qBrand">Q</li>
                <li data-group="R" class="mui-table-view-divider mui-indexed-list-group" id="rBrand">R</li>
                <li data-group="S" class="mui-table-view-divider mui-indexed-list-group" id="sBrand">S</li>
                <li data-group="T" class="mui-table-view-divider mui-indexed-list-group" id="tBrand">T</li>
                <li data-group="W" class="mui-table-view-divider mui-indexed-list-group" id="WBrand">W</li>
                <li data-group="X" class="mui-table-view-divider mui-indexed-list-group" id="XBrand">X</li>
                <li data-group="Y" class="mui-table-view-divider mui-indexed-list-group" id="YBrand">Y</li>
                <li data-group="Z" class="mui-table-view-divider mui-indexed-list-group" id="ZBrand">Z</li>
            </ul>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.indexedlist.js"></script>
<!--<script src="../js/mui.grouplist.testdata.js"></script>-->
<script type="text/javascript" charset="utf-8">
    mui.init();
    mui.ready(function() {
        var header = document.querySelector('header.mui-bar');
        var list = document.getElementById('list');
        //calc hieght
        list.style.height = document.body.offsetHeight+ 'px';
        //循环数据
        function dataHandle(data,typeLabel) {
            var html='';
            for(var j=0; j<data.carBrandName.length; j++){
                var nameObj=data.carBrandName[j];
                var imgObj=data.carBrandImg[j];
                html+='<li class="mui-table-view-cell mui-indexed-list-item mui-left">'
                html+='<img src='+imgObj+' class="carBrandImg">'
                html+='<span>'+nameObj+'</span>'
                html+='</li>';
            }
            $(typeLabel).after(html);
        };
        //ajax调用
        $.ajax({
            type: 'GET',
            url: 'carBrandData.json',
            dataType: 'json',
            async: false,
            success: function (data) {
                dataHandle(data.a,'#aBrand');
                dataHandle(data.b,'#bBrand');
                dataHandle(data.c,'#cBrand');
                dataHandle(data.d,'#dBrand');
                dataHandle(data.f,'#fBrand');
                dataHandle(data.g,'#gBrand');
                dataHandle(data.h,'#hBrand');
                dataHandle(data.j,'#jBrand');
                dataHandle(data.k,'#kBrand');
                dataHandle(data.l,'#lBrand');
                dataHandle(data.m,'#mBrand');
                dataHandle(data.n,'#nBrand');
                dataHandle(data.o,'#oBrand');
                dataHandle(data.q,'#qBrand');
                dataHandle(data.r,'#rBrand');
                dataHandle(data.s,'#sBrand');
                dataHandle(data.t,'#tBrand');
                dataHandle(data.W,'#WBrand');
                dataHandle(data.X,'#XBrand');
                dataHandle(data.Y,'#YBrand');
                dataHandle(data.Z,'#ZBrand');
            }
        });
        window.indexedList = new mui.IndexedList(list);
        //返回上一页
        $('.mui-indexed-list-item').click(function () {
            /*window.history.go(-1);*/
            var carBrandName = $(this).find("span").html();
            console.log(carBrandName);
            window.document.location.href="index.html?l="+carBrandName;
        })
    });
</script>
</body>
</html>